<template>
	<view>
		<p style="text-align: center;margin-bottom: 10px;">食光社</p>
		<view>
			<ul class="sxc_ware">
				<li class="sxc_ware_li" v-for="(item,index) in warelist" :key="item.id">{{item.name}}</li>
			</ul>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular previous-margin="40rpx" next-margin="40rpx" v-for="item in warelist"
					:key="item.id">
					<swiper-item>
						<img :src="item.img" alt="" style="width: 100%;height: 200px;">
						<view>
							{{item.pan}}
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fenleilist
	} from '../../api/index.js'
	export default {
		data() {
			return {
				warelist: [],
				current: 0,
			}
		},
		methods: {},
		created() {
			console.log(this.$route.query.id);
			fenleilist().then(res => {
				console.log(res.data);
				this.warelist = res.data
				console.log(this.warelist);
			})
		}
	}
</script>

<style scoped>
	ul {
		list-style: none;
	}

	.sxc_ware {
		display: flex;
		padding: 10px;
		overflow-x: auto;
		white-space: nowrap;

		.sxc_ware_li {
			/* background-color: #FDCE40; */
			padding: 10px 20px;
			border: 1px solid #999;
			border-radius: 50px;
			margin-right: 15px;
		}

		.sxc_ware li.active {
			background-color: #FDCE40;
		}
	}
</style>